<template>
  <div class="module4">
    <div class="module4-content">
      <div class="module4-left">
        <div class="dp-module">
          <Wmodule title="大棚信息">
            <div class="dp-infor-list">
              <div
                class="dp-infor-item"
                v-for="(item, index) in dpInfor"
                :key="index"
              >
                <div class="dp-infor-item-icon">
                  <img :src="item.icon" alt="" class="icon" />
                </div>
                <div class="dp-infor-item-name">
                  {{ item.name }}
                </div>
                <div class="dp-infor-item-value">
                  {{ item.value }}
                  <span v-if="item.unit" class="unit">{{ item.unit }}</span>
                </div>
              </div>
            </div>
          </Wmodule>
        </div>
        <div class="hjqx-module">
          <Wmodule title="环境气象信息">
            <div class="hj-qx-list">
              <div
                class="hj-qx-item"
                v-for="(item, index) in hjData"
                :key="index"
              >
                <div class="hj-qx-item-icon">
                  <img :src="item.icon" alt="" class="icon" />
                </div>
                <div class="hj-qx-item-name">
                  {{ item.name }}
                </div>
                <div class="hj-qx-item-value">
                  {{ item.value || '--' }}
                  <span v-if="item.unit" class="unit">{{ item.unit }}</span>
                </div>
              </div>
            </div>
          </Wmodule>
        </div>
        <div class="baozi-module">
          <Wmodule title="孢子捕捉">
            <div class="baozi-list">
              <div
                class="baozi-item"
                v-for="(item, index) in baozilist"
                :key="index"
              >
                <div class="baozi-item-img">
                  <img :src="imgUrl12" alt="" icon="icon" />
                </div>
                <div class="baozi-item-name">{{ item.statusLabel }}</div>
                <div class="baozi-item-status">{{ item.status }}</div>
              </div>
            </div>
          </Wmodule>
        </div>
      </div>
      <div class="module4-right">
        <Wmodule title="产量趋势" class="clqs-module">
          <ClChartBar :sourceData="yieldMap" />
        </Wmodule>
        <Wmodule title="土壤墒情" class="tur-module">
          <TurDeatil :sourceData="turData" />
        </Wmodule>
        <Wmodule title="虫情监测" class="cqjc-module">
          <CqjcChart :sourceData="wormDevices" />
        </Wmodule>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, watch, toRaw } from 'vue'
import Wmodule from '@/components/wmodule/index.vue'
import ClChartBar from '../chartmodule/clChartbar.vue'
import TurDeatil from '../chartmodule/turDeatil.vue'
import CqjcChart from '../chartmodule/cqjcChart.vue'

import imgUrl2 from '@/assets/img/2.png'
import imgUrl3 from '@/assets/img/3.png'
import imgUrl4 from '@/assets/img/4.png'
import imgUrl5 from '@/assets/img/5.png'
import imgUrl6 from '@/assets/img/6.png'
import imgUrl7 from '@/assets/img/7.png'
import imgUrl8 from '@/assets/img/8.png'
import imgUrl9 from '@/assets/img/9.png'
import imgUrl10 from '@/assets/img/10.png'
import imgUrl11 from '@/assets/img/11.png'
import imgUrl12 from '@/assets/img/12.png'
import imgUrl22 from '@/assets/img/22.png'
import imgUrl28 from '@/assets/img/28.png'

const props = defineProps({
  sourceData: {
    type: Object,
    default: () => {}
  }
})

const dpInforOptions = [
  {
    name: '农业主体',
    value: 0,
    icon: imgUrl2,
    key: 'personLiable'
  },
  {
    name: '大棚面积',
    value: 0,
    unit: 'm²',
    icon: imgUrl3,
    key: 'area'
  },
  {
    name: '设备数量',
    value: 0,
    icon: imgUrl28,
    key: 'deviceCount'
  },
  {
    name: '作物品种',
    value: 0,
    icon: imgUrl22,
    key: 'cropCount'
  }
]
const dpInfor = ref(dpInforOptions)

const hjDataOptions = [
  {
    name: '温度',
    value: '',
    unit: 'C°',
    icon: imgUrl11
  },
  {
    name: '湿度',
    value: '',
    unit: '%',
    icon: imgUrl10
  },
  {
    name: '风向',
    value: '',
    icon: imgUrl8
  },
  {
    name: '风速',
    value: '',
    unit: 'm/s',
    icon: imgUrl7
  },
  {
    name: '大气压',
    value: '',
    unit: 'kpa',
    icon: imgUrl6
  },
  {
    name: '降雨量',
    value: '',
    unit: 'mm',
    icon: imgUrl9
  }
]
const hjData = ref(hjDataOptions)

const baozilist = ref([])

const turData = ref([])

const yieldMap = ref({})

const wormDevices = ref([])

watch(
  () => props.sourceData,
  (newValue) => {
    const _newValue = toRaw(newValue)
    const _keys = Object.keys(_newValue)
    if (_keys.length > 0) {
      // 有数据
      dpInfor.value = dpInforOptions.map((item) => {
        return {
          ...item,
          value: _newValue[item.key] || 0
        }
      })
      // 环境气象
      const _metMappingVos = _newValue.metMappingVos

      const _hjData = hjDataOptions.map((item) => {
        const row = _metMappingVos.find(
          (item2) => item2.deviceItemName === item.name
        )
        if (row) {
          const _metData = row.metData || row.soilData || {}
          if (item.name === '湿度') {
            return {
              ...item,
              value: _metData.humValueStr,
              unit: _metData.humUnit
            }
          }
          return {
            ...item,
            value: _metData.temValueStr,
            unit: item.name != '风向' ? _metData.temUnit : ''
          }
        } else {
          return item
        }
      })
      hjData.value = _hjData

      baozilist.value = _newValue.sporeStatusVos || []

      turData.value = _newValue.soilMappingVos || []

      yieldMap.value = _newValue.yieldMap || {}

      if (_newValue.wormDevices && _newValue.wormDevices[0]) {
        wormDevices.value = _newValue.wormDevices[0].wornData || []
      }
    } else {
      dpInfor.value = dpInforOptions
      hjData.value = hjDataOptions
      baozilist.value = []
      turData.value = []
      yieldMap.value = []
      wormDevices.value = []
    }
  },
  {
    immediate: true
  }
)
</script>
<style lang="scss" scoped>
.module4 {
  width: 100%;
  height: 100%;
  padding-top: 16px;
  box-sizing: border-box;
  .module4-content {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;
    gap: 36px;
    padding: 0px 16px;
    box-sizing: border-box;
    .module4-left {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
    }
    .module4-right {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
    }
  }
  .dp-infor-list {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    padding: 17px 0px 0px 0px;
    box-sizing: border-box;
    .dp-infor-item {
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      .dp-infor-item-icon {
        width: 77px;
        height: 68px;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon {
          width: 100%;
          height: 100%;
        }
      }
      .dp-infor-item-name {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        line-height: 22px;
      }
      .dp-infor-item-value {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 14px;
        color: #ffffff;
        line-height: 22px;
      }
    }
  }
  .dp-module {
    width: 100%;
    :deep(.module1-content) {
      padding-bottom: 0px;
    }
  }
  .hjqx-module {
    width: 100%;
    :deep(.module1-content) {
      padding-right: 0px;
      padding-top: 24px;
      padding-bottom: 0px;
    }
  }
  .hj-qx-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px 38px;
    .hj-qx-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background: rgba(30, 85, 77, 0.2);
      gap: 10px;
      .hj-qx-item-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        .icon {
          width: 40px;
          height: 40px;
        }
      }
      .hj-qx-item-name {
        font-family: Microsoft YaHei;
        font-weight: 600;
        font-size: 12px;
        color: #e7ffec;
        line-height: 20px;
        flex: 1;
      }
      .hj-qx-item-value {
        font-family: Microsoft YaHei;
        font-weight: 600;
        font-size: 12px;
        color: #e7ffec;
        line-height: 20px;
      }
    }
  }
  .baozi-module {
    width: 100%;
    flex: 1;
    flex-shrink: 0;
    position: relative;
    .module1 {
      height: 100%;
    }
    :deep(.module1-content) {
      padding-right: 0px;
      padding-top: 24px;
      padding-bottom: 0px;
      padding-left: 0px;
      overflow: hidden;
      overflow-y: auto;
      flex: auto;
      height: 0;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
  .baozi-list {
    .baozi-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background: rgba(30, 85, 77, 0.2);
      padding: 0px 16px;
      box-sizing: border-box;
      height: 40px;
      gap: 10px;
      .baozi-item-img {
        display: flex;
        justify-content: center;
        align-items: center;
        .icon {
          width: 12px;
          height: 12px;
          display: block;
        }
      }
      .baozi-item-name {
        font-family: Microsoft YaHei;
        font-weight: 600;
        font-size: 14px;
        color: #ffffff;
        flex: 1;
      }
      .baozi-item-status {
        font-family: Microsoft YaHei;
        font-weight: 600;
        font-size: 14px;
        color: #ffffff;
      }
    }
    & > .baozi-item:not(:last-child) {
      margin-bottom: 10px;
    }
  }
  .clqs-module {
    :deep(.module1-content) {
      padding-bottom: 0px;
    }
  }
  .sub-title-box {
    position: absolute;
    right: 16px;
    top: 17px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    .w-react {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 12px;
      color: #ffffff;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 7px;
      &.reactColor1::before {
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        background: #f65510;
        border-radius: 2px;
      }
      &.reactColor2::before {
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        background: #05bb70;
        border-radius: 2px;
      }
    }
  }
  .tur-module {
    :deep(.module1-content) {
      padding-bottom: 0px;
    }
  }
  .cqjc-module {
    flex: 1;
    :deep(.module1-content) {
      padding-bottom: 0px;

      flex: auto;
      .cqjc-chart {
        max-height: 150px;
      }
    }
  }
}
</style>
